<!--  -->
<template>
  <div style="width: 80%;margin: 0px auto;">
      <div class="article_head">
          <h1>{{ article.title }}</h1>
          <div class="article_info">
              <span>发帖时间：{{ article.date }} </span>&nbsp;
              <span><el-icon><View /></el-icon> 阅读量：{{ article.views + 1 }}</span>
              <span >收藏:
                <div style="display: inline;" :class="isStar?'unstar':'star'" @click="stared">
                  <el-button style="font-size: 18px;" :icon="isStar?'CirclePlusFilled':'RemoveFilled'" type="text">{{staredNum}}</el-button>
                </div>
              </span>
          </div>
      </div>
      <div class="cover"><img :src="article.cover" width="200px" alt="" srcset=""></div>
      <div class="article_content" v-html="article.content"></div>
      
      <div >
          <div>
            <el-row>
              <el-col :span="10" style="display: flex;align-items: center;">
                <el-avatar
                  :size="40"
                  class="mr-3"
                  :src="article.author_gravatar"
                  style="cursor: pointer;"
                  @click="toMine(article.author_id)"
                />
                <span style="line-height: 40px;display: inline-block;font-weight: bold;font-size:medium;margin:0px 10px;"> {{ article.author }} </span>
                <el-button type="primary" size="small" :disabled="relation" :plain="relation" round @click="buildRelation(article.author_id)">{{ relation?'已关注':'关注' }}</el-button>
              </el-col>
              <div>
                评分:<el-rate :disabled="isRate" v-model="myRate" allow-half @click="clickScore"/>
              </div>
              <el-col :span="5" style="display: flex;justify-content: flex-end;align-items: center;">
                <div style="cursor: pointer;" @click="report"><el-icon><WarningFilled /></el-icon><span style="font-size: 14px;">举报</span></div>
              </el-col>
            </el-row>
          </div>
      </div>
      <div>
        <comment :author_id="this.article.author_id" @toMine="toMine"></comment>
      </div>
    </div>
</template>

<script>
import axios from 'axios';
import comment from '../components/comment/comment.vue'
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'
import { h } from 'vue'

export default {
  name: 'Article',
  components: {comment},
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
        myRate:'',    //我打的评分
        isRate:false, //是否已评分
        relation:false, //是否已关注
        article:{},    //当前文章对象
        isStar:false,   //是否已收藏
        staredNum:0,  //收藏数
    }
  },
  computed: {},
  watch: {},
  methods: {          //AjaxResult成功返回类型data.data=>:{msg: '操作成功', code: 200, data: true}
    toMine(id){        //跳转到个人主页
      this.$router.push({path:'/mine',query:{id:id}});
    },
    report(){        //举报功能
      if(this.$store.state.user.u_id==this.article.author_id) return this.$message.error('不能举报自己的文章！');
      axios.get('http://localhost:8888/article/report',{
        params:{
          a_id:this.$route.query.id,
          u_id:this.$store.state.user.u_id
        }
      }).then(data=>{
        if(data.data.data){
          ElMessage({
            message: '我们已收到您的举报，正在全力审查！',
            type: 'success',
          })
          ElNotification({
            title: '通知',
            message: h('i', { style: 'color: teal' }, '请在消息页面查看举报进度'),
          })
        }else{
          ElMessage({
            message: data.data.msg,
            type: 'warning',
          })
        }
        
      })
    },
    checkIsStar(){   //检查是否已收藏
      axios.get('http://localhost:8888/article/isStar',{
        params:{
          a_id:this.$route.query.id,
          u_id:this.$store.state.user.u_id
        }
      }).then(data=>{
        this.isStar=data.data.data
      })
    },
    getStaredNum(){   //收藏数
      axios.get('http://localhost:8888/article/staredNum',{
        params:{
          a_id:this.$route.query.id,
        }
      }).then(data=>{
        this.staredNum=data.data.data
      })
    },
    stared(){     //收藏功能
      axios.get('http://localhost:8888/article/star',{
          params:{
            u_id:this.$store.state.user.u_id,
            a_id:this.article.a_id
          }
        }).then(data=>{
          if(data.data.data){
            ElMessage({
              message: data.data.msg,
              type: 'success',
            })
          }else{
            ElMessage({
              message: data.data.msg,
              type: 'error',
            })
          }
          this.isStar=!this.isStar
          if(this.isStar){
            this.staredNum++
          }else{
            this.staredNum--
          }
        })
    },
    isScore(){        //是否已评分，如果有是多少
      axios.get('http://localhost:8888/article/isScore',{
        params:{
          u_id:this.$store.state.user.u_id,
          a_id:this.$route.query.id
        }
      }).then(data=>{
        if(data.data.data){
          this.isRate=true
          this.myRate=data.data.data
          console.log("isScore:"+data.data.data);
        }
      })
    },
    clickScore(){     //评分功能
      if(!this.isRate){
        axios.get('http://localhost:8888/article/score',{
          params:{
            u_id:this.$store.state.user.u_id,
            a_id:this.$route.query.id,
            flag:this.myRate
          }
        }).then(data=>{
          console.log('clickScore:'+data.data.data);
          if(data.data.data){
            ElMessage({
              // showClose: true,
              message: '评分成功.',
              type: 'success',
            })
            this.isRate = true;
          }
        }).catch(err=>{
          ElMessage({
            // showClose: true,
            message: '当前繁忙，请稍后再试.',
            type: 'error',
          })
        })
      }
      console.log('clickScore:'+this.myRate);
    },
    addviews(){           //进入该页面则浏览量+1
      axios.get('http://localhost:8888/article/views',{
        params:{
          a_id:this.$route.query.id,
          u_id:this.$store.state.user.u_id
        }
      }).then(data=>{
        console.log(data.data);
      })
    },
    buildRelation(id){    //如果没有关注，则关注
      if(id === this.$store.state.user.u_id){
        ElMessage({
          // showClose: true,
          message: '你不能关注自己.',
          type: 'warning',
        })
        return
      }
      if(this.$store.state.user.u_id === null || this.article.author_id === null) return
      axios.get('http://localhost:8888/user/buildRelationship',{
        params:{
          focus_id:this.$store.state.user.u_id,
          focused_id:this.article.author_id
        }
      }).then(data=>{
        if(data.data.data){
          ElMessage({
            // showClose: true,
            message: '关注成功.',
            type: 'success',
          })
          this.relation = true
        }else{
          ElMessage({
            // showClose: true,
            message: '请勿重复关注.',
            type: 'error',
          })
          // this.relation = true
        }
      })
    },
    isRelation(){       //是否已经关注过
      axios.get('http://localhost:8888/user/isRelation',{
        params:{
          focus_id:this.$store.state.user.u_id,
          focused_id:this.$route.query.id
        }
      }).then(data=>{
        console.log('isRelation:'+data.data.data);
        if(data.data.data){
          this.relation = true
        }else{
          this.relation = false
        }
      })
    },
    init(){
      this.myRate='',    //我打的评分
      // this.isRate=false, //是否已评分
      // this.relation=false, //是否已关注
      this.article={}    //当前文章对象
      axios.get('http://localhost:8888/article/getOne',{
        params:{
          a_id:this.$route.query.id,
        }
      }).then(data=>{
        if(data.data.data != null){
          this.article=data.data.data
          console.log(this.article);
        }else{
          this.$router.push('/error')
        }
      })
      //浏览数增加
      this.addviews()
      //是否已经关注
      this.isRelation()
      //是否已评分
      this.isScore()
      //收藏数
      this.getStaredNum()
      //是否收藏帖子
      this.checkIsStar()
    }
  },
  created() {       //初始化
    this.init()
  },
  mounted() {}
}
</script>

<style scoped>
.article_content{
  display: flex;
  flex-direction: column;
}
.article_info span{
  margin: 0px 5px;
}

.star{
  --el-color-primary:rgb(85, 85, 85) !important;
  color:rgb(85, 85, 85) !important;
}

.star :hover{
  --el-color-primary:rgb(253, 176, 59) !important;
  color:rgb(253, 176, 59) !important;
}

.unstar{
  --el-color-primary:rgb(253, 176, 59) !important;
  color:rgb(253, 176, 59) !important;
}

.unstar :hover{
  --el-color-primary:rgb(85, 85, 85) !important;
  color:rgb(85, 85, 85) !important;
}
</style>
